<template>
	<main-content hasTab ref="mainC">
		<view class="home-body">
			<view class="count-box p-16 ">
				<view class="flex justify-between items-center grow p-b-16">
					<view class="total-box grow flex justify-start items-start flex-col">
						<view class="">
							<text class="total-box-sum">
								{{totalArr.unit=='元'?formatToMoney(countData[totalArr.field]/100):countData[totalArr.field]}}
							</text>
							<text class="total-box-unit">
								{{totalArr.unit}}
							</text>
						</view>
						<text class="total-box-subTitle subTitle-color p-y-4">{{totalArr.subTitle}}</text>
					</view>
					<view class="total-box-icon p-y-4 p-x-10 font-13 font-medium">
						今日
					</view>
				</view>
				<view class="flex flex-wrap flex-row justify-between">
					<view class="m-b-8 countList-itemBox" v-for="(item,index) in countList" :key="index">
						<view class="countList-item p-8">
							<view class="countList-item-val font-16 font-medium">
								{{totalArr.unit=='元'?formatToMoney(countData[item.field]/100):countData[item.field]}}
								{{item.unit}}
							</view>
							<view class="font-14 p-b-8 font-medium" style="color: #fff;" v-if='item.field01'>
								{{totalArr.unit01=='元'?formatToMoney(countData[item.field01]/100):countData[item.field01]}}
								{{item.unit01}}
							</view>
							<view class="subTitle-color countList-item-subTitle">
								{{item.subTitle}}
								<u-icon name="question-circle-fill" @tap="showTip(item.tip)" class="p-l-8"
									v-if='!$System.isEmpty(item.tip)' />
							</view>
						</view>
					</view>
				</view>
				<view class="countList-item flex items-center p-8 ">
					<view class="w-48 p-r-16">
						<view class="store-box" @click="showSelectStore">
							<text class="p-r-8">
								<text v-if="!$System.isEmpty(useUserStore().storeInfo.storeName)">
									{{useUserStore().storeInfo.storeName}}</text>
								<text v-else>请选择门店名称</text>
							</text>
							<text class="drop-down"></text>
						</view>
						<view style="position: absolute;top:-800vh">
							<select-store ref="selStore" class="select-store font-14" v-model="storeId"
								placeholder-style='color: #fff;' placeholder="请选择门店名称" :clearable='false'
								@change="changeStore" :queryParams="{showRoleFlag: false}"
								:initParams="{no:useUserStore().storeInfo.no}" />
						</view>
						<view class="subTitle-color font-12 p-t-6">
							收银门店
						</view>
					</view>
					<view class="flex items-center justify-between grow h-100">
						<view class="home-bk-color w-50 h-100 flex justify-between items-center p-y-12 p-x-8 font-12"
							style="border-radius: 14rpx;" @click="showPopupFn">
							<u-image width="32rpx" height="32rpx" :src='iconEwm' class="p-r-4"></u-image>
							快捷收银
						</view>
						<view class="home-bk-color w-46 h-100 flex justify-between items-center p-y-12 p-x-8 font-12"
							style="border-radius: 14rpx;" @click="scanCodeFn">
							<u-image width="32rpx" height="32rpx" :src='iconScan' class="p-r-4"></u-image>
							扫一扫
						</view>
					</view>
				</view>
				<!-- <view class="btn-box p-t-4">
					<view class="mch-home-btn main-color flex justify-content items-center p-y-9" @click="showPopupFn">
						快捷收银
					</view>
				</view> -->
			</view>
			<view class="menu-box p-16 ">
				<view class="menu-box-group " v-for="group in menus.filter(e=>e.type==0)" :key="group.id">
					<group-title>
						<template #icon>
							<view class="main-color">
								<u-icon name="title-icon" custom-prefix="custom-icon" />
							</view>
						</template>
						{{group.name}}
					</group-title>
					<view class="flex flex-wrap p-t-8 p-b-8">
						<view class="menu-box-group-item flex flex-col justify-content items-center m-b-8"
							v-for="item in group?.children" :key="item.id" @tap="$System.goTo(item.path)">
							<u-image width="72rpx" height="72rpx" :src='menuImgList[item.name]'></u-image>
							<text class="menu-box-group-item-text p-t-8">{{item.name}}</text>
						</view>
					</view>
				</view>
			</view>
			<view class="foot">
				<foot-box />
			</view>
		</view>
		<u-popup v-model="showPopup" mode="center" width="500rpx" border-radius="14" :closeable='true'>
			<view>
				<view class="p-14">
					<group-title>
						<template #icon>
							<view class="main-color">
								<u-icon name="title-icon" custom-prefix="custom-icon" />
							</view>
						</template>
						快捷收银
					</group-title>
				</view>
				<view class="p-16">
					<u-swiper :list="listImg" height='400' @change='changeImg'></u-swiper>
					<view class="flex justify-content items-center">
						{{listImg[cornerMark]?.title}}
					</view>
				</view>
				<view class="p-16">
					<u-button type="primary" @click="saveImg(listImg[cornerMark]?.image)">保存到相册</u-button>
				</view>
			</view>
		</u-popup>
	</main-content>
</template>
<script setup name='index'>
	import {
		reactive,
		ref,
		getCurrentInstance,
		computed
	} from 'vue'
	import {
		onLoad,
		onShow,
		onReady,
		onPullDownRefresh
	} from '@dcloudio/uni-app'
	import {
		useCommonStore
	} from '@/stores/common.js'
	import {
		useUserStore
	} from '@/stores/user.js'

	import {
		formatToMoney,
		saveImageToAlbum
	} from '@/common/common.js'
	import {
		TimeUtils
	} from '@/common/myDay.js'

	import {
		orderApi
	} from '@/common/api/order/index.js'
	import {
		codeApi
	} from '@/common/api/code/index.js'
	import selectStore from '@/components/select-store/index.vue'

	const commonStore = useCommonStore()
	const {
		proxy
	} = getCurrentInstance()

	const maiColor = computed(() => {
		return proxy.$System.maiColor.value
	})
	const totalArr = ref({
		field: 'sumAmt',
		subTitle: '订单金额',
		unit: '元'
	})
	const countList = ref(
		[{
			field: 'revenueAmt',
			subTitle: '营收金额/笔数',
			field01: 'revenueCount',
			unit01: '笔',
			unit: '元',
			tip: '营收金额=订单金额－退款金额'
		}, {
			field: 'paidUpAmt',
			subTitle: '实收金额/笔数',
			field01: 'paidUpCount',
			unit01: '笔',
			unit: '元',
			tip: '实收金额=订单金额－退款金额-交易手续费-实际分账金额'
		}, {
			field: 'refundAmt',
			subTitle: '退款金额',
			unit: '元'
		}, {
			field: 'refundCount',
			subTitle: '退款笔数',
			unit: '笔'
		}]
	)

	const api = {
		getData: (data = {}) => {
			let mydata = {
				...data,
				cTimeBegin: TimeUtils.getDayStart().valueOf(),
				cTimeEnd: TimeUtils.getDayEnd().valueOf(),
				merchantId: useUserStore().userInfo.id, //商户编号
				pageNo: 1,
				pageSize: 10,
			}

			return orderApi.getOverview(mydata)
		},
	}

	const countData = ref({
		tradeAmt: 0, //订单金额（分）
		refundCount: 0, //退款笔数
		revenueAmt: 0, //营收金额（分）
		paidUpCount: 0, //实收笔数
		paidUpAmt: 0, //实收金额（分）
		revenueCount: 0, //营收笔数
		refundAmt: 0, //退款金额（分）
	})

	function getData() {
		api.getData().then(res => {
			countData.value = res.data
			uni.stopPullDownRefresh();
		})
	}

	const showTip = (data) => {
		uni.showModal({
			title: '提示',
			content: data,
			showCancel: false
		})
	}

	const iconEwm = '/static/images/ewm.svg'
	const iconScan = '/static/images/scan.svg'

	const menuImgList = ref({
		'代理商管理': '/static/images/代理商管理.svg',
		'交易流水': '/static/images/交易流水.svg',
		'进件管理': '/static/images/进件管理.svg',
		'商户管理': '/static/images/商户管理.svg',
		'实时佣金': '/static/images/实时佣金.svg',
		'业务员管理': '/static/images/业务员管理.svg',
		'分账明细': '/static/images/分账明细.svg',
		'门店管理': '/static/images/门店管理.svg',
		'收银员管理': '/static/images/收银员管理.svg',
		'通道管理': '/static/images/通道管理.svg',
		'投诉信息': '/static/images/投诉信息.svg',
		'退款流水': '/static/images/退款流水.svg',
		'undefined': '/static/images/代理商管理.svg',
	})
	const menus = computed(() => {
		return useUserStore().getMenus()
	})

	// 门店信息
	const selStore = ref(null)
	const showSelectStore = () => {
		console.log('点击了', selStore.value);
		selStore.value.onShowArea()
	}
	const storeId = ref(null)
	const changeStore = (data) => {
		console.log('data==>', data[0]);
		useUserStore().setStoreInfo(data[0])
		console.log('storeId==>', storeId.value);
	}
	// 扫一扫
	const scanCodeFn = () => {
		if (proxy.$System.isEmpty(storeId.value)) {
			uni.showToast({
				title: '请先选择门店',
				icon: 'error',
				duration: 2000
			});
			return
		}
		proxy.$System.goTo('/pages-menus/pages/scan/index')
	}

	const showPopup = ref(false)
	const cornerMark = ref(0)
	const listImg = ref([])
	const tipContent = ref('')
	const showPopupFn = async () => {
		let mydata = {
			storeId: storeId.value,
			merchantId: useUserStore().userInfo.id, //商户编号
		}
		let res = await codeApi.codeList(mydata)
		if (res.code != 200) return
		listImg.value = res.data.map(e => ({
			image: e.urlBase64Image,
			title: e.storeName
		}))
		showPopup.value = true
		console.log('listImg.value==>', listImg.value);
	}
	const changeImg = (val) => {
		cornerMark.value = val
	}
	const saveImg = (val) => {
		if (!val) return
		saveImageToAlbum(val).then(() => {
			console.log('val保存成功');
		})
	}

	console.log('menus==>', menus.value);
	onLoad(async (options) => {
		uni.setNavigationBarColor({
			frontColor: '#ffffff', // 导航栏标题颜色，只能是'black'或'white'
			backgroundColor: proxy.$System.maiColor.value // 导航栏背景颜色
		});
		// 动态设置标题
		// uni.setNavigationBarTitle({
		// 	title: '标题'
		// })
	})
	onReady(() => {
		getData()
		storeId.value = useUserStore()?.storeInfo?.id
	})
	onPullDownRefresh(() => {
		console.log('下拉');
		getData()
	})
</script>
<style lang='scss' scoped>
	.data-theme-agent .home-body,
	.data-theme-merchant .home-body {
		background-size: 100%;
		background-repeat: no-repeat;
		background-color: var(--maiColor);
	}

	.data-theme-agent .home-body {
		background-image: url('/static/images/index_bg_agent.png');
	}

	.data-theme-merchant .home-body {
		background-image: url('/static/images/index_bg_mch.png');
	}

	.count-box {
		display: flex;
		flex-direction: column;
		min-height: 596rpx;
	}

	.mch-home-btn {
		background-color: #fff;
		border-radius: 16rpx;
	}

	.select-store {
		:deep(.my-select) {
			.u-input__input {
				color: #ffffff;
				font-size: 28rpx;
			}
		}
	}

	.store-box {
		color: #ffffff;
		font-size: 28rpx;

		.drop-down {
			display: inline-block;
			color: #c0c4cc;
			transform: rotate(45deg);
			-ms-transform: rotate(45deg);
			/* IE 9 */
			-webkit-transform: rotate(45deg);
			/* Safari and Chrome */

			:after {
				display: block;
				content: '';
				width: 18rpx;
				height: 18rpx;
				border-top: #c0c4cc 4rpx solid;
				border-right: #c0c4cc 4rpx solid;
			}
		}
	}

	.home-bk-color {
		background-color: var(--maiColor);
		filter: brightness(1.1);
		color: #fff;
	}

	.total-box {
		color: #fff;
	}

	.total-box-sum {
		font-size: 64rpx;
		font-weight: 600;
	}

	.total-box-unit {
		padding-left: 20rpx;
		font-size: 36rpx;
	}

	.total-box-subTitle {
		font-size: 28rpx;
	}

	.total-box-icon {
		color: var(--maiColor);
		background-color: #fff;
		border-radius: 12rpx;
		border: 4rpx solid #006663;
	}

	.subTitle-color {
		color: rgba(255, 255, 255, 0.5);
	}

	.countList-itemBox {
		width: calc((100% - 16rpx)/2);
	}

	.countList-item {
		border-radius: 16rpx;
		background: rgba(0, 0, 0, 0.1);
	}

	.countList-item-val {
		font-size: 32rpx;
		padding-bottom: 8rpx;
		color: rgba(255, 255, 255, 1);
	}

	.countList-item-subTitle {
		font-size: 24rpx;
	}

	.menu-box {
		border-radius: 16rpx 16rpx 0 0;
	}

	.menu-box-group-item {
		width: calc((100% - 32rpx)/3);
		margin-left: 16rpx;
		border-radius: 16rpx;
		border: 2rpx solid rgba(235, 235, 235, 1);
		background-color: #fff;
		padding: 32rpx 0;
	}

	.menu-box-group-item:nth-child(3n+1) {
		margin-left: 0;
	}

	.menu-box-group-item-text {
		font-size: 28rpx;
		color: rgba(102, 102, 102, 1);
	}

	.menu-box,
	.foot {
		background-color: rgba(246, 247, 248, 1);
	}
</style>
<style>
	page {
		background-color: rgba(246, 247, 248, 1);
	}
</style>